<template lang="pug">
div
  nav-div
    .item(slot="search")
        search-input(
          :keyword.sync="keyword",
          :load="loadFn",
        )
  .flex.jsb.ae
    .ui.header 优惠卷列表
    span 有效  {{v_true_count}}
    span 过期  {{v_false_count}}
    span 有人  {{g_true_count}}
    span 无人  {{g_false_count}}
    span 使用  {{u_true_count}}
    span 未用  {{u_false_count}}
    div
      a(v-link="{ name: 'channel',path: 'channel'}") 渠道列表
    .ui.button(@click="createCoupon") 新建

  table.ui.table(v-if="Showed")
    tr 
      td 优惠卷名称
      td 
         .ui.input
           input(v-model="coupon.name")
      td 归属的渠道
      td 
         .ui.input
           input(v-model="coupon.channel") 
      td 优惠卷数量
      td 
         .ui.input
           input(v-model="coupon.number") 
    tr
      td 优惠卷金额
      td 
         .ui.input
           input(v-model="coupon.price")
      td 开始时间
      td 
        .ui.input
            date-picker(
             style="width: 180px;",
              :unix.sync="coupon.valid_before"
            )  
      td 结束时间
      td
        .ui.input
            date-picker(
             style="width: 180px;",
              :unix.sync="coupon.valid_after"
            )  
    tr 
      td 优惠卷满额 
      td 
         input(type='checkbox', :value='true', v-model="coupon.limit_state")
         label 无限额
         .ui.input
           input(v-model="coupon.quota")  
      td 商品ID 
      td 
         input(type='checkbox', :value='true', v-model="coupon.kind")
         label 所有商品
         .ui.input
           input(v-model="coupon.product_id") 
      td
         .ui.button(@click="saveCoupon(coupon)") 保存     
  table.ui.table
    thead
      tr
        th ID
        th 名称
        th 渠道
        th 编码
        th 金额
        th 开始时间
        th 结束时间
        th 有效状态
        th 领取状态
        th 使用状态
    tbody
        tr(v-for="coupon in coupons ")
          td {{coupon.id}}
          td {{coupon.name}}
          td {{coupon.channel}}
          td {{coupon.code}}
          td {{coupon.price}}元
          td {{coupon.valid_before | unixToDate 'YYYY-MM-DD HH:mm:ss'}}
          td {{coupon.valid_after | unixToDate 'YYYY-MM-DD HH:mm:ss'}} 
          td {{coupon.validing ? '有效' : '过期'}} 
          td {{coupon.geting ? '有人' : '无人'}} 
          td {{coupon.using ? '使用' : '未用'}} 
</template>

<script>
import { getallCoupons,newCoupon} from '../../vuex/action'
import NavDiv from '../../modules/nav'
import ObjSingleSelect from '../../modules/select/objSingle'
import CouponSelect from '../../modules/select/coupon'
import DatePicker from '../../modules/date'
import SearchInput from '../../modules/semantic/search'

export default {
  name: 'new',
  components: {
    NavDiv,
    DatePicker,
    SearchInput
  },
  vuex: {
    getters: {
      couponsSource: ({ coupon }) => coupon.coupons,
      couponSource: ({ coupon }) => coupon.coupon,
    },
    actions: {
      getallCoupons,newCoupon,
    }
  },
  data () {
    return {
      keyword: null,
      page: 1,
      coupons: [],
      Showed: false,
      coupon: {},
      v_true_count: 0,
      v_false_count: 0,
      g_true_count: 0,
      g_false_count: 0,
      u_true_count: 0,
      u_false_count: 0
    }
  },
  ready () {
    this.load()
  },
  methods: {
     loadFn() {
      this.$el.scrollTop = 0
      this.page = 1
      this.load()
    },
    load(){
      catchError(async () => {
        await this.getallCoupons({
          page: this.page,
          q: this.keyword,
        })
      })
    },
    createCoupon() {
      this.Showed = true
      this.coupon = _.cloneDeep(this.couponSource)
    },
    saveCoupon(coupon) {
      this.Showed = false
      catchError(async () => {
        const data = {
          coupon: coupon
        }
        await this.newCoupon(coupon)
        this.load()
      }, '保存成功')
    },
  },
  watch: {
    couponsSource: {
      handler (val, old) {
        this.coupons = _.cloneDeep(val)
        this.v_true_count = 0
        this.v_false_count = 0
        this.g_true_count = 0
        this.g_false_count = 0
        this.u_true_count = 0
        this.u_false_count = 0
        for(var i in this.coupons){
          /*有效状态统计 */
          if (this.coupons[i].validing){
            this.v_true_count = this.v_true_count + 1
          }
          else {
            this.v_false_count = this.v_false_count + 1
          }
           /*领取状态统计 */
           if (this.coupons[i].geting){
            this.g_true_count = this.g_true_count + 1
          }
          else {
            this.g_false_count = this.g_false_count + 1
          }
           /*使用状态统计 */
           if (this.coupons[i].using){
            this.u_true_count = this.u_true_count + 1
          }
          else {
            this.u_false_count = this.u_false_count + 1
          }
        }
      },
      deep: true,
      immediate: false,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
